import { Text, View } from '@tarojs/components'
import React, { useCallback, useEffect, useMemo } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import ToDayDataHeader from '@COMPONENTS/DataCenter/ToDayDataHeader'
import { CustomI18NITF, LanguageType } from '@INTERFACES/Common'
import meditationActions from '@ACTIONS/meditation'
import { RootStateITF } from '@REDUXITF/index'
import Images from '@ASSET/Images'
import style from './TodayMeditationCard.module.scss'

interface Props {
  language: LanguageType
}

const TodayMeditationCard: React.FC<Props> = ({ language }) => {
  const dispatch = useDispatch()
  const { dispatchGetMyMeditationSummary } = meditationActions
  const isVisitor = useSelector<RootStateITF, boolean>(state => state.profile.isVisitor)
  const todayTotalTime = useSelector<RootStateITF, number>(state => state.meditation.todayTotalTime)
  const todayMeditationTitle = useSelector<RootStateITF, CustomI18NITF| null>(state => state.meditation.todayMeditationTitle)
  const totalMin = useMemo(() => Math.ceil(todayTotalTime / 60), [todayTotalTime])
  const getMyMeditationSummary = useCallback(
    () => dispatch(dispatchGetMyMeditationSummary()),
    [dispatch, dispatchGetMyMeditationSummary]
  )

  useEffect(() => {
    if (isVisitor) return
    getMyMeditationSummary()
  }, [getMyMeditationSummary, isVisitor])
  const title = todayMeditationTitle?.[language]
  const hasData = !!title
  return (
    <View className={style.container}>
      <ToDayDataHeader src={Images.dataCenter.icon_today_meditation} title="冥想" />
      <View className={style.content}>
        <Text className={style.totalTime}>{`${hasData ? totalMin : '-'}`}</Text>
        <Text className={style.totalTimeUnit}>分钟</Text>
      </View>
      <Text className={`${style.titleText} ${hasData ? '' : style.noDataText}`}>
        {title || '暂无数据'}
      </Text>
    </View>
  )
}

export default TodayMeditationCard
